<include file="Public/head"/>
<body class="no-skin">
<include file="Public/header"/>
<script type="text/javascript" src="__PUBLIC__/qwadmin/js/echarts.min.js"></script>
<script src="__PUBLIC__/qwadmin/js/calendar/WdatePicker.js"></script>
		<div class="main-container" id="main-container">
			<script type="text/javascript">
				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
			</script>
			<include file="Public/sidebar"/>
				<div class="main-content">
                    <include file="Public/breadcrumbs"/>
					<div class="page-content">
                    	<include file="Public/set"/>
						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->

								<div class="space-6"></div>

								<div class="row">
									<div class="col-sm-12">
										<div class="widget-box transparent invoice-box">
											<form name="" action="" method="get">
											<div class="widget-header widget-header-large">
													渠道：
													<select name="channel_code" id="channel_code">
														<option value="">请选择渠道</option>
														<volist name="customer" id="vo">
														<option value="{$vo.code}" data-id="{$vo.id}" <eq name="Think.get.channel_code" value="$vo['code']">selected</eq>>{$vo.shop_name}</option>
														</volist>
													</select>
													贸易模式：
													<select name="trade_pattern" id="trade_pattern">
														<option value="">请选择贸易模式</option>
													</select>
													类型：
													<select name="type" id="show_type">
														<option value="1" <eq name="Think.get.type" value="1">selected</eq>>时报</option>
														<option value="2" <eq name="Think.get.type" value="2">selected</eq>>日报</option>
														<option value="3" <eq name="Think.get.type" value="3">selected</eq>>周报</option>
														<option value="4" <eq name="Think.get.type" value="4">selected</eq>>月报</option>
														<option value="5" <eq name="Think.get.type" value="5">selected</eq>>年报</option>
													</select>
													<span id="type_input"></span>
													<script>
														$('#show_type').change(function(){
															type_shows($(this).val());
														});
														function type_shows( type ) {
															var htmlstr = '';
															switch( type ) {
																case '1':
																	htmlstr = '<input type="text" value="{$Think.get.start_time}" name="start_time" onClick="WdatePicker({readOnly:true})" />'
																break;
																case '2' :
																	htmlstr = '<input type="text" value="{$Think.get.start_time}" name="start_time" onClick="WdatePicker({readOnly:true})" /> -  <input type="text" value="{$Think.get.end_time}" name="end_time" onClick="WdatePicker({readOnly:true})" />';
																break;
																case '3' :
																	htmlstr = '<select name="start_time"><volist name="w_list" id="vo"><option value="{$vo.id}" <eq name="Think.get.start_time" value="$vo['id']">selected</eq>>{$vo.title}</option></volist></select> -  <select name="end_time"><volist name="w_list" id="vo"><option value="{$vo.id}" <eq name="Think.get.end_time" value="$vo['id']">selected</eq>>{$vo.title}</option></volist></select>';
																break;
																case '4' :
																	htmlstr = '<input type="text" value="{$Think.get.start_time}" name="start_time" onClick="WdatePicker({readOnly:true,dateFmt:\'yyyy\'})" />';
																break;
															}
															$('#type_input').html( htmlstr );
														}
														type_shows($('#show_type').val());
														$('#channel_code').change(function(){
															channel_code($(this).find('option:selected').attr('data-id') , 2);
														});
														function channel_code( customer_id , type ) {
															var def = "{$Think.get.trade_pattern}";
															var htmlstr = '<option value="">请选择贸易模式</option>';
															$.get('{:U('Order/tradeList')}',{id:customer_id},function( data ){
																if( data != '' ) {
																	$.each(data , function( k , v ){
																		htmlstr += '<option value="'+v.code+'"';
																		if( def == v.code && type == 1 ) {
																			htmlstr += ' selected ';
																		}
																		htmlstr +='>'+v.name+'</option>';
																	});
																}
																$('#trade_pattern').html( htmlstr );
															},'json');
														}
														channel_code($('#channel_code option:selected').attr('data-id') , 1);
													</script>
													<button type="submit" class="btn btn-purple btn-sm">
					                                    <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
					                                    Search
					                                </button>
											</div>
											</form>
											<div class="echarts" id="echarts-line-chart" style="width:100%; height:600px;"></div>
										</div>
									</div>
								</div>

								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div><!-- /.main-content -->
			</div><!-- /.main-container-inner -->
		</div>
		<script>
			// 使用刚指定的配置项和数据显示图表。
			var myChart = echarts.init(document.getElementById('echarts-line-chart'));
			var xData = function() {
				var data = [];
				for (var i = 1; i < 15; i++) {
					data.push(i + "月份");
				}
				return data;
			}();

			var option = {
				backgroundColor: "#fff",
				"title": {
					"text": "{$title}",
					"subtext": "{$desc}",
					x: "4%",
				},
				"tooltip": {
					"trigger": "axis",
					"axisPointer": {
						"type": "shadow",
						textStyle: {
							color: "#fff"
						}

					},
				},
				"grid": {
					"borderWidth": 0,
					"top": 110,
					"bottom": 95,
					textStyle: {
						color: "#fff"
					}
				},
				 

				"calculable": true,
				"xAxis": [{
					"type": "category",
					"axisLine": {
						lineStyle: {
							color: '#90979c'
						}
					},
					"splitLine": {
						"show": false
					},
					"axisTick": {
						"show": false
					},
					"splitArea": {
						"show": false
					},
					"axisLabel": {
						"interval": 0,

					},
					"data": [{$info.total_num}],
				}],
				"yAxis": [{
					"type": "value",
					"splitLine": {
						"show": false
					},
					"axisLine": {
						lineStyle: {
							color: '#90979c'
						}
					},
					"axisTick": {
						"show": false
					},
					"axisLabel": {
						"interval": 0,

					},
					"splitArea": {
						"show": false
					},

				}],
				"dataZoom": [{
					"show": true,
					"height": 30,
					"xAxisIndex": [
						0
					],
					bottom: 30,
					"start": 10,
					"end": 80,
					handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
					handleSize: '110%',
					handleStyle:{
						color:"#d3dee5",
						
					},
					   textStyle:{
						color:"#fff"},
					   borderColor:"#90979c"
					
					
				}, {
					"type": "inside",
					"show": true,
					"height": 15,
					"start": 1,
					"end": 35
				}],
				"series": [ {
						"name": "总金额",
						"type": "line",
						"stack": "总金额",
						symbolSize:10,
						symbol:'circle',
						"itemStyle": {
							"normal": {
								"color": "#438eb9",
								"barBorderRadius": 0,
								"label": {
									"show": true,
									"position": "top",
									formatter: function(p) {
										return p.value > 0 ? (p.value) : '';
									}
								}
							}
						},
						"data": [{$info.total_data}]
					},
				]
			}
			myChart.setOption( option);
        </script>

        <include file="Public/footer"/>
        <include file="Public/footerjs"/>
</body>
</html>
